<script lang="ts" setup>
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { rechargeApi } from '#/api/user/user';

const [Form, formApi] = useVbenForm({
  schema: [
    {
        fieldName: 'user_id',
        label: 'ID',
        defaultValue: 0,
        component: 'Input',
        dependencies: {
            show: false,
            // 随意一个字段改变时，都会触发
            triggerFields: [''],
        },
    },
    {
        fieldName: 'balance',
        label: '当前余额',
        component: 'Input',
        componentProps: {
            disabled: true,
        },
        dependencies: {
            show(values) {
                return values.target == 'balance';
            },
            triggerFields: ['target'],
        },
    },
    {
        fieldName: 'points',
        label: '当前积分',
        component: 'Input',
        componentProps: {
            disabled: true,
        },
        dependencies: {
            show(values) {
                return values.target == 'points';
            },
            triggerFields: ['target'],
        },
    },
    {
        component: 'RadioGroup',
        componentProps: {
            options: [
                { label: '余额', value: 'balance' },
                { label: '积分', value: 'points' },
            ],
        },
        fieldName: 'target',
        label: '充值类型',
        defaultValue: 'balance',
    },
    {
        fieldName: 'mode',
        label: '充值方式',
        component: 'RadioGroup',
        defaultValue: 'inc',
        componentProps: {
            options: [
                {label: '增加',value: 'inc'},
                {label: '减少',value: 'dec'},
                {label: '最终金额',value: 'final'},
            ],
        },
        dependencies: {
            show(values) {
                return values.target == 'balance';
            },
            triggerFields: ['target'],
        },
    },
    {
        fieldName: 'mode',
        label: '充值方式',
        component: 'RadioGroup',
        defaultValue: 'inc',
        componentProps: {
            options: [
                {label: '增加',value: 'inc'},
                {label: '减少',value: 'dec'},
                {label: '最终积分',value: 'final'},
            ],
        },
        dependencies: {
            show(values) {
                return values.target == 'points';
            },
            triggerFields: ['target'],
        },
    },
    {
        fieldName: 'money',
        label: '变更金额',
        component: 'InputNumber',
        defaultValue: 0,
        dependencies: {
            show(values) {
                return values.target == 'balance';
            },
            triggerFields: ['target'],
        },
    },
    {
        fieldName: 'value',
        label: '变更数量',
        component: 'InputNumber',
        defaultValue: 0,
        dependencies: {
            show(values) {
                return values.target == 'points';
            },
            triggerFields: ['target'],
        },
    },
    {
        fieldName: 'remark',
        label: '管理员备注',
        component: 'Textarea',
        componentProps: {
            rows: 5,
        },
        formItemClass: 'items-start',
        labelClass: 'pt-1',
    },
  ],
  showDefaultActions: false,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) return;
    const values = await formApi.getValues();
    drawerApi.lock();
    rechargeApi(values).then((res) => {
      message.success({
        content: res.message,
      });
      drawerApi.close();
    })
    .catch(() => {
      drawerApi.unlock();
    });
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData();
      formApi.resetForm();
      if (data.user_id) {
        formApi.setValues({
            user_id: data.user_id,
            balance: data.balance,
            points: data.points,
            target: 'balance',
            remark: '',
        });
      }
    }
  },
  overlayBlur: 1,
});


</script>
<template>
  <Drawer title="充值">
    <Form />
  </Drawer>
</template>
